<template>
	<view class="container">
		<!-- 说明 
			cartList =》数据集 [{
								id: 1,
								image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553005139&di=3368549edf9eee769a9bcb3fbbed2504&imgtype=jpg&er=1&src=http%3A%2F%2Fimg002.hc360.cn%2Fy3%2FM01%2F5F%2FDB%2FwKhQh1T7iceEGRdWAAAAADQvqk8733.jpg',
								attr_val: '春装款 L',
								stock: 15,
								title: 'OVBE 长袖风衣',
								price: 278.00,
								number: 1
							}]
				checked => 是否显示选择框 默认 false 
					min: {  最小选择
						type: Number,
						default: 1
					},
					max: {
						type: Number,
						default: Infinity
					},
					@deleteCartItem 删除变化回调
					@checkChange 选择变化回调
					@numChange 数量变化回调
					disabled: {  是否可以直接输入数量 
						type: Boolean,
						default: true
					} 
					<shopCar :cartList="cartList"  @numChange='numChange()'  :checked="true" :checkChange = 'checkChange()' :deleteCartItem="deleteCartItem()" ></shopCar>
					-->
					
		<view >
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="item.id">
					<view
						class="cart-item" 
						:class="{'b-b': index!==cartList.length-1}"
					>
						<view class="image-wrapper">
							<image :src="item.image" 
								:class="[item.loaded]"
								mode="aspectFill" 
								lazy-load 
								@load="onImageLoad('cartList', index)" 
								@error="onImageError('cartList', index)"
							></image>
							<view 
							v-show="checked"
								class="yticon icon-xuanzhong2 checkbox"
								:class="{checked: item.checked}"
								@click="check('item', index)"
							></view>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.title}}</text>
							<text class="attr">{{item.attr_val}}</text>
							<text class="price">¥{{item.price}}</text>
							
							<view class="uni-numbox">
								<view class="uni-numbox-minus" 
									@click="_calcValue('subtract',index)"
								>
									<text class="yticon icon--jianhao" :class="item.minDisabled?'uni-numbox-disabled': ''" ></text>
								</view>
								<input 
									class="uni-numbox-value" 
									type="number" 
									:disabled="disabled"
									:value="item.number" 
									
									@blur="_onBlur"
								>
								<view 
									class="uni-numbox-plus" 
									@click="_calcValue('add',index)"
								>
									<text class="yticon icon-jia2" :class="item.maxDisabled?'uni-numbox-disabled': ''" ></text>
								</view>
							</view>
						</view>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	
	 
	export default {
		components: {
		 
		},
		props: {
			
			errorImage: {
				type:String,
				default:''
			},
			cartList:{
				type:Array
			},
			checked: {
				type:Boolean,
				default:false
			},
			isMax: {
				type: Boolean,
				default: false
			},
			isMin: {
				type: Boolean,
				default: false
			},
		 
			
			min: {
				type: Number,
				default: 1
			},
			max: {
				type: Number,
				default: Infinity
			},
			step: {
				type: Number,
				default: 1
			},
			disabled: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				inputValue: 0,
				total: 0, //总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				 
			};
		},
		onLoad(){
			this.loadData();
		},
		watch:{
			
		},
		
		methods: {
			// 计数器
			_calcValue(type,index) {
				this.$emit('numChange',null)
				const scale = this._getDecimalScale();
				let value = this.inputValue * scale;
				let newValue = this.cartList[index].number;
				let step = this.step * scale;
				
				if(type === 'subtract'){
					newValue = this.cartList[index].number  ;
					console.log(newValue)
					if (newValue <= this.min){
						this.cartList[index].minDisabled = true;
					}
					if(newValue > this.min){
						this.cartList[index].number = newValue -1
					}
					if(newValue < this.max && this.maxDisabled === true){
						this.cartList[index].maxDisabled = false;
					}
				}else if(type === 'add'){
					newValue = this.cartList[index].number + 1;
					if (newValue >= this.max){
						this.cartList[index].maxDisabled = true;
					}
					if(newValue < this.max){
						 this.cartList[index].number = newValue   
					}
					if(newValue > this.min && this.minDisabled === true){
						this.cartList[index].minDisabled = false;
					}
				}
				if(newValue === value){
					return;
				}
				 
			},
			_getDecimalScale() {
				let scale = 1;
				// 浮点型
				if (~~this.step !== this.step) {
					scale = Math.pow(10, (this.step + '').split('.')[1].length);
				}
				return scale;
			},
			_onBlur(event) {
				let value = event.detail.value;
				if (!value) {
					this.inputValue = 0;
					return
				}
				value = +value;
				if (value > this.max) {
					value = this.max;
				} else if (value < this.min) {
					value = this.min
				}
			
				this.inputValue = value
			},
			//请求数据
			
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image =this.errorImage ;
			},
			
			 //选中状态处理
			check(type, index){
				if(type === 'item'){
					this.cartList[index].checked = !this.cartList[index].checked;
				}else{
					const checked = !this.allChecked
					const list = this.cartList;
					list.forEach(item=>{
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.$emit('checkChange')
			},
			//数量
			numberChange(data){
				this.cartList[data.index].number = data.number;
				 
			},
			//删除
			deleteCartItem(index){
				 
				let list = this.cartList;
				let row = list[index];
				let id = row.id;
				this.$emit('deleteCartItem')
				this.cartList.splice(index, 1);
				 console.log(222)
				uni.hideLoading();
			},
			//清空
			clearCart(){
				uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							this.cartList = [];
						}
					}
				})
			},
			
		}
	}
</script>

<style lang='scss'>
	.uni-numbox {
		position:absolute;
		left: 30rpx;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width:230rpx;
		height: 70rpx;
		background:#f5f5f5;
	}
	
	.uni-numbox-minus,
	.uni-numbox-plus {
		margin: 0;
		background-color: #f5f5f5;
		width: 70rpx;
		height: 100%;
		line-height: 70rpx;
		text-align: center;
		position: relative;
	}
	.uni-numbox-minus .yticon,
	.uni-numbox-plus .yticon{
		font-size: 36rpx;
		color: #555;
	}
	
	.uni-numbox-minus {
		border-right: none;
		border-top-left-radius: 6rpx;
		border-bottom-left-radius: 6rpx;
	}
	
	.uni-numbox-plus {
		border-left: none;
		border-top-right-radius: 6rpx;
		border-bottom-right-radius: 6rpx;
	}
	
	.uni-numbox-value {
		position: relative;
		background-color: #f5f5f5;
		width: 90rpx;
		height: 50rpx;
		text-align: center;
		padding: 0;
		font-size: 30rpx;
	}
	
	.uni-numbox-disabled.yticon {
		color: #d6d6d6;
	}
	.container{
		padding-bottom: 134rpx;
		/* 空白页 */
		.empty{
			position:fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100vh;
			padding-bottom:100rpx;
			display:flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
			background: #fff;
			image{
				width: 240rpx;
				height: 160rpx;
				margin-bottom:30rpx;
			}
			.empty-tips{
				display:flex;
				font-size:24rpx+2rpx;
				color: #C0C4CC;
				.navigator{
					color: #4399fc;
					margin-left: 16rpx;
				}
			}
		}
	}
	/* 购物车列表项 */
	.cart-item{
		display:flex;
		position:relative;
		padding:30rpx 40rpx;
		.image-wrapper{
			width: 230rpx;
			height: 230rpx;
			flex-shrink: 0;
			position:relative;
			image{
				border-radius:8rpx;
			}
		}
		.checkbox{
			position:absolute;
			left:-16rpx;
			top: -16rpx;
			z-index: 8;
			font-size: 44rpx;
			line-height: 1;
			padding: 4rpx;
			color: #C0C4CC;
			background:#fff;
			border-radius: 50px;
		}
		.item-right{
			display:flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position:relative;
			padding-left: 30rpx;
			.title,.price{
				font-size:28rpx + 2rpx;
				color: #303133;
				height: 40rpx;
				line-height: 40rpx;
			}
			.attr{
				font-size:24rpx + 2rpx;
				color: #909399;
				height: 50rpx;
				line-height: 50rpx;
			}
			.price{
				height: 50rpx;
				line-height:50rpx;
			}
		}
		.del-btn{
			padding:4rpx 10rpx;
			font-size:34rpx; 
			height: 50rpx;
			color: #909399;
		}
	}
	/* 底部栏 */
	.action-section{
		/* #ifdef H5 */
		margin-bottom:100rpx;
		/* #endif */
		position:fixed;
		left: 30rpx;
		bottom:30rpx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 100rpx;
		padding: 0 30rpx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20rpx 0 rgba(0,0,0,.5);
		border-radius: 16rpx;
		.checkbox{
			height:52rpx;
			position:relative;
			image{
				width: 52rpx;
				height: 100%;
				position:relative;
				z-index: 5;
			}
		}
		.clear-btn{
			position:absolute;
			left: 26rpx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52rpx;
			line-height: 52rpx;
			padding-left: 38rpx;
			font-size:28rpx;
			color: #fff;
			background: #C0C4CC;
			border-radius:0 50px 50px 0;
			opacity: 0;
			transition: .2s;
			&.show{
				opacity: 1;
				width: 120rpx;
			}
		}
		.total-box{
			flex: 1;
			display:flex;
			flex-direction: column;
			text-align:right;
			padding-right: 40rpx;
			.price{
				font-size: 32rpx;
				color: #303133;
			}
			.coupon{
				font-size:24rpx;
				color: #909399;
				text{
					color: #303133;
				}
			}
		}
		.confirm-btn{
			padding: 0 38rpx;
			margin: 0;
			border-radius: 100px;
			height: 76rpx;
			line-height: 76rpx;
			font-size:28rpx + 2rpx;
			background: #4399fc;
			box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
		}
	}
	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked{
		color: #4399fc;
	}
</style>
